<!DOCTYPE html>
<html xmlns:wicket="http://wicket.apache.org">
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<wicket:panel>
		<style>
body {
	color: #2A2AC5;
	background-image: url('/images/Page/bg.png');
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	font-family: "Arial";
}

#settingsForm input {
	-moz-box-shadow: 5px 5px 5px #57518F;
	-webkit-box-shadow: 5px 5px 5px #57518F;
	box-shadow: 5px 5px 5px #57518F;
	padding-top: 5px;
}

hr {
	border: 1;
	color: #0e0771;
	background-color: #0e0771;
	height: 3px solid;
	width: 100%;
	text-align: left;
	margin-left: 20px;
}
</style>
		<div style="width: 100%; padding-left: 30px; margin-top: 25px;"
			align="center">

			<form wicket:id="settingsForm" id="settingsForm">
				<div wicket:id="feedback"></div>
				<div
					style="border-left: 3px solid; color: #0e0771; text-align: center; width: 800px;">
					<table style="text-align: left; margin-left: 20px; width: 100%;">
						<tr>
							<td style="width: 380px;"><span style="font-weight: bold;">Show
									contact events :</span></td>
							<td><input wicket:id="settings.showContactEvents"
								type="checkbox" /></td>
						</tr>
						<tr>
							<td><span style="font-weight: bold;">Show contact
									avatars :</span></td>
							<td><input wicket:id="settings.showContactAvatar"
								type="checkbox" /></td>
						</tr>
						<tr>
							<td><span style="font-weight: bold;">Auto log out
									after seconds :</span></td>
							<td><input wicket:id="settings.autoLogoutSecond" type="text" /></td>
						</tr>
						<!-- 				<tr> -->
						<!-- 					<td><span style="font-weight: bold;">Select template :</span></td> -->
						<!-- 					<td><a href="#" wicket:id="template"><img wicket:id="browseTemplate" /></a></td> -->
						<!-- 				</tr> -->
						<tr>
							<td><span style="font-weight: bold;">Notify events
									which have priority higher than :</span></td>
							<td><select><option>1</option>
									<option>2</option>
									<option>3</option>
									<option>4</option>
									<option>5</option>
									<option>6</option>
									<option>7</option>
									<option>8</option>
									<option>9</option>
									<option>10</option>
							</select></td>
						</tr>
						<tr>
							<td><span style="font-weight: bold;">How many day
									will shown notification before :</span></td>
							<td><input wicket:id="settings.notifyDaysBefore" type="text" /></td>
						</tr>
					</table>
					<hr />
					<div style="float: none; overflow: hidden;">
						<table style="text-align: left; margin-left: 20px; float: left;">
							<tr>
								<td style="width: 200px;"><span style="font-weight: bold;">Email
										address :</span></td>
								<td style="width: 150px;"><input wicket:id="user.email"
									type="text" /></td>
							</tr>
							<tr>
								<td><span style="font-weight: bold;">New password :</span></td>
								<td><input wicket:id="user.password" type="text" /></td>
							</tr>
							<tr>
								<td><span style="font-weight: bold;">Confirm
										password :</span></td>
								<td><input name="password2" type="text" /></td>
								<td><span
									style="font-weight: bold; text-align: left; margin-left: 20px;">Avatar:</span></td>

							</tr>
							<tr>
								<td><span style="font-weight: bold;">Birthdate:</span></td>
								<td><span wicket:id="user.birthdate"></span></td>
							</tr>
							<tr>
								<td><span style="font-weight: bold;">Address :</span></td>
								<td><input wicket:id="user.address" type="text" /></td>
							</tr>
							<tr>
								<td><span style="font-weight: bold;">City :</span></td>
								<td><input wicket:id="user.city" type="text" /></td>
							</tr>
							<tr>
								<td><span style="font-weight: bold;">State :</span></td>
								<td><input wicket:id="user.state" type="text" /></td>
							</tr>

							<tr>
								<td><span style="font-weight: bold;">Phone :</span></td>
								<td><input wicket:id="user.phone" type="text" /></td>
							</tr>

						</table>
						<div style="text-align: right;">
							<img src="/images/Page/AvatarPage.png" alt="avatar" />
						</div>
						<div style="text-align: right;">
							<img src="/images/Page/ButtonBrowse.png" alt="browse" />
						</div>
					</div>
					<hr>
					<div style="text-align: center; padding-top: 15px;">
						<a href="#" wicket:id="link"><img wicket:id="saveImage" /></a>
					</div>
				</div>

			</form>

		</div>
	</wicket:panel>
</body>
</html>